<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 展示搜索框页面 pagination的属性有name、status存在于searchForm子组件中-->
        <SearchForm
          :searchData="pagination"
          @handleClear="handleClear"
          @handleReset="handleReset"
          @handleSearch="handleSearch"
        ></SearchForm>
        <TableList
          :data="data"
          :total="total"
          :pagination="pagination"
          @onPageChange="onChange"
          @handleBulid="handleBulid"
          @handleEdit="handleEdit"
        ></TableList>

        <DialogForm
          ref="formRef"
          :visible="visible"
          :title="title"
          :data="formBaseData"
          @handleClose="handleClose"
          @handle-add="handleAdd"
          @handleEdit="handleEditForm"
        ></DialogForm>
      </div>
      <t-pagination
        :total="total"
        v-if="total > 5"
        v-model="pagination.pageNum"
        v-model:pageSize="pagination.pageSize"
        @change="onChange"
      />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue';
import { getProjectList, projectAdd, getProjectDetails, projectUpdate } from '@/api/serve'
import { MessagePlugin } from 'tdesign-vue-next'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'
//引入列表页组件
import TableList from './components/TableList.vue'
import DialogForm from './components/DialogForm.vue'

onMounted(() => {
  getData()
})

const getData = async () => {
  const result = await getProjectList(pagination.value)
  if (result.code == 200) {
    total.value = Number(result.data.total);
    data.value = result.data.records
  }
}

const onChange = (val) => {
  console.log('val的值是' + val)
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getData()
}

const data = ref([]);
const total = ref(0);

const pagination = ref({
  pageSize: 5,
  pageNum: 1,
});

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageSize: 5,
    pageNum: 1
  }
  //重新查询列表
  getData();
}
//搜索
const handleSearch = () => {
  getData();
}
//清空
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getData();
}

//是否显示弹窗
var visible = ref(false)
//定义子组件对象
const formRef = ref(null)
const title = ref('') // 弹窗标题


//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  title.value = "新增"
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () => {
  visible.value = false;
}

//调用新增接口
const handleAdd = async (val) => {
  //调用接口
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    //查询列表
    getData()
    //关闭弹窗
    handleClose()
    //清理弹窗中的内容，方便下次使用
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}

const formBaseData = ref({}) // 弹窗表单内容

//编辑
const handleEdit = (val) => {
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}

// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getData()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
</script>
